<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<meta name="description" content="">
	<meta name="author" content="">
	<!--<link rel="icon" href="../../favicon.ico">-->

	<title>Paging Component - FooTable</title>

	<!-- Bootstrap core CSS -->
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">

	<!-- Prism -->
	<link href="../css/prism.css" rel="stylesheet">

	<!-- FooTable Bootstrap CSS -->
	<link href="../../compiled/footable.bootstrap.min.css" rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="../css/docs.css" rel="stylesheet">

	<script src="../js/demo-rows.js"></script>
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body class="docs">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a href="../../index.html" class="navbar-brand">FooTable</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li><a href="../getting-started.html">Getting started</a></li>
				<li class="dropdown active">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Components <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="editing.html">Editing</a></li>
						<li><a href="filtering.html">Filtering</a></li>
						<li><a>Paging</a></li>
						<li><a href="sorting.html">Sorting</a></li>
						<li><a href="state.html">State</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="../jsdocs/index.html" target="_blank">JSDocs</a></li>
				<li><a href="https://github.com/fooplugins/FooTable" target="_blank">GitHub</a></li>
			</ul>
		</div><!--/.nav-collapse -->
	</div>
</nav>

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
	<div class="container">
		<h1>Paging</h1>
		<h2>A simple pagination control for your table.</h2>
	</div>
</div>

<div class="container">
	<!-- General -->
	<div class="docs-section">
		<p class="lead">
			The paging component allows you to easily provide pagination for your table once you start dealing with a large number of rows.
			This provides a better user experience by not only limiting the number of rows visually displayed but by also providing a significant
			performance increase by limiting the number of rows that need to be drawn when the plugin initializes, a breakpoint changes, or the window resizes.
		</p>
		<div class="callout callout-info">
			<h4>Note</h4>
			<p>See the <a href="../getting-started.html#examples">Getting started - Examples</a> section for examples of this component.</p>
		</div>
	</div>

	<!-- Options -->
	<div class="docs-section">
		<h1 class="page-header anchored"><span id="options" class="anchor">&nbsp;</span>Options</h1>
		<p class="lead">The below lists all the options for the paging component, these are available in addition to the <a href="../getting-started.html#options">core options</a>.</p>

		<div class="list-group list-group-detailed">
			<h3 class="list-group-header">General options</h3>

			<!-- enabled -->
			<a href="#enabled" class="list-group-item anchored">
				<span id="enabled" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">enabled <small>boolean</small></h4>
				<p class="list-group-item-text">Whether or not the component is enabled.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<div class="examples">

						<div class="example default">
							<p><code>false</code></p>
							<p>By default this component is disabled, no UI or features of this component will be available.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table data-paging=&quot;true&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;enabled&quot;: true
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- container -->
			<a href="#container" class="list-group-item anchored">
				<span id="container" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">container <small>string</small></h4>
				<p class="list-group-item-text">A selector specifying where to place the paging components UI.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>null</code></p>
							<p>By default the UI is displayed within a row in the foot of the table. By specifying a selector nothing is displayed in the table and the UI is instead appended to the first element matched by the selector.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;div id=&quot;paging-ui-container&quot;&gt;&lt;/div&gt;
&lt;table class=&quot;table&quot; data-paging-container=&quot;#paging-ui-container&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;container&quot;: &quot;#paging-ui-container&quot;
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- countFormat -->
			<a href="#current" class="list-group-item anchored">
				<span id="countFormat" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">countFormat <small>string</small></h4>
				<p class="list-group-item-text">The string used as a format to generate the count text.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>"{CP} of {TP}"</code></p>
							<p>
								The default format uses the current page and total pages placeholders which are substituted at run time for the actual values.
								The below lists all available placeholders that you can use when supplying your own format.
							</p>
							<ul>
								<li><strong>{CP}</strong> - The current page.</li>
								<li><strong>{TP}</strong> - The total number of pages available.</li>
								<li><strong>{PF}</strong> - The first row number of the current page.</li>
								<li><strong>{PL}</strong> - The last row number of the current page.</li>
								<li><strong>{TR}</strong> - The total number of rows available.</li>
							</ul>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-count-format=&quot;{CP} of {TP}&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;countFormat&quot;: &quot;{CP} of {TP}&quot;
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- current -->
			<a href="#current" class="list-group-item anchored">
				<span id="current" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">current <small>number</small></h4>
				<p class="list-group-item-text">The page number to display when first initialized.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>1</code></p>
							<p>By default the current page is the first page.</p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-current=&quot;3&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;current&quot;: 3
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- limit -->
			<a href="#limit" class="list-group-item anchored">
				<span id="limit" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">limit <small>number</small></h4>
				<p class="list-group-item-text">The maximum number of page links to display in the pagination control.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<p>
						This is used to stop the pagination control possibly overflowing with hundreds of page links depending on the number of rows and the page size. It is used to provide
						consistent number of links regardless of how many pages there might be. Once the total number of pages exceeds this limit additional buttons to navigate the page links
						will be displayed.
					</p>

					<div class="examples">

						<div class="example default">
							<p><code>5</code></p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-limit=&quot;3&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;limit&quot;: 3
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- position -->
			<a href="#position" class="list-group-item anchored">
				<span id="position" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">position <small>string</small></h4>
				<p class="list-group-item-text">The position of the pagination control within the paging row.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>"center"</code></p>
							<p>The other supported values for this option are <code>"left"</code> and <code>"right"</code></p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-position=&quot;right&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;position&quot;: &quot;right&quot;
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

			<!-- size -->
			<a href="#size" class="list-group-item anchored">
				<span id="size" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">size <small>number</small></h4>
				<p class="list-group-item-text">The number of rows per page.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

					<div class="examples">

						<div class="example default">
							<p><code>10</code></p>
						</div>

					</div>

					<div class="examples">

						<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-size=&quot;20&quot;&gt;
	...
&lt;/table&gt;</code></pre>

					</div>

					<div class="examples">

						<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;size&quot;: 20
		}
	});
});</code></pre>

					</div>

				</div>

			</div>

		</div>

	</div>

</div> <!-- /container -->

<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../js/prism.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/docs.js"></script>
<!-- Add in any FooTable dependencies we may need -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<!-- Add in FooTable itself -->
<script src="../../compiled/footable.min.js"></script>
<!-- Initialize FooTable -->
<script>
	jQuery(function($){
		$('#paging-example-1').footable({
			"columns": $.get("columns.json"),
			"rows": $.get("rows.json")
		});
	});
</script>
</body>
</html>